<script lang="ts" setup>
import {
    BellOutlined,
    ExportOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SettingOutlined
} from '@ant-design/icons-vue'
import useMainStore from '@/store'
import { computed, ref } from 'vue'
import { removeLocalStorage } from '@/assets/utils/utils'
import { useRouter } from 'vue-router'

const router = useRouter()

const store = useMainStore()
const collapsed = computed(() => store.collapsed)
const todoList = computed(() => store.todoList)
const userName = ref<string>('admin')

const showMoreContent = ref<boolean>(false)

const userBarTagList = [
    { title: '设置', key: 'setting', icon: SettingOutlined },
    { title: '退出登录', key: 'signOut', icon: ExportOutlined }
]

function handle_userBarMenu(option: string) {
    showMoreContent.value = !showMoreContent.value
    switch (option) {
        case 'setting':
            router.push('/home/setting')
            store.handle_setTag('设置', `/home/setting`)
            break
        case 'signOut':
            removeLocalStorage('token')
            removeLocalStorage('role')
            router.replace('/login')
            break
    }
}

function handle_jumpToMessage() {
    router.push('/home/message')
    store.handle_setTag('系统消息', `/home/message`)
}

const activeKey = ref<string>('1')
</script>

<template>
    <div class="head-bar full-height flex align-center justify-between">
        <div class="flex align-center">
            <menu-unfold-outlined
                v-if="collapsed"
                :style="{ fontSize: '24px' }"
                class="ml-5 flex align-center"
                @click="store.handle_collapsed()"
            />
            <menu-fold-outlined
                v-else
                :style="{ fontSize: '24px' }"
                class="ml-5 flex align-center"
                @click="store.handle_collapsed()"
            />
        </div>
        <div class="mr-13 flex align-center">
            <a-popover
                class="mr-6 pointer"
                placement="bottom"
                :overlayStyle="{ width: '260px' }"
            >
                <template #content>
                    <a-tabs v-model:activeKey="activeKey">
                        <a-tab-pane
                            key="1"
                            tab="未处理消息"
                        >
                            <div
                                class="message-content my-2 pointer"
                                v-for="data in store.message.unreadList"
                                :key="data.id"
                                @click="handle_jumpToMessage"
                            >
                                {{ data.title }}
                            </div>
                        </a-tab-pane>
                        <a-tab-pane
                            key="2"
                            tab="代办事项"
                            force-render
                        >
                            <div
                                v-for="data in store.todoList"
                                :key="data.id"
                            >
                                <a-checkbox v-model:checked="data.checked">
                                    <span :class="data.checked ? 'done' : ''">{{
                                        data.title
                                    }}</span>
                                </a-checkbox>
                            </div>
                        </a-tab-pane>
                    </a-tabs>
                </template>
                <a-badge :count="store.message.unreadList.length">
                    <bell-outlined :style="{ fontSize: '23px' }" />
                </a-badge>
            </a-popover>
            <a-dropdown
                :trigger="['hover']"
                class="user-bar pointer"
            >
                <div class="flex align-center px-3">
                    <a-avatar :size="40">
                        <template #icon>
                            <img
                                src="@/static/homeIcon/rng.jpg"
                                alt="avatar"
                            />
                        </template>
                    </a-avatar>
                    <div class="flex align-center">
                        <div class="user-name ml-3 mr-1">
                            {{ userName }}
                        </div>
                    </div>
                </div>
                <template #overlay>
                    <a-menu>
                        <div
                            v-for="(data, index) in userBarTagList"
                            :key="index"
                        >
                            <a-menu-item
                                :key="data.key"
                                @click="handle_userBarMenu(data.key)"
                            >
                                <component :is="data.icon" />
                                <span class="ml-2">{{ data.title }}</span>
                            </a-menu-item>
                        </div>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.head-bar {
    .user-bar {
        transition: all 0.5s;
        background: #ffffff;

        &:hover {
            background: #f0f2f5;
        }

        .user-name {
            color: black;
            font-size: 16px;
        }
    }
}

.message-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.done {
    color: #cccccc;
    font-style: italic;
    text-decoration: line-through;
}
</style>
